<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            margin-left: 30px;
            width: 400px;
        }

        span{
            /* margin-left: 20px; */
            color: red;
        }
        .item {
            margin-bottom: 15px;
        }

        input {
            margin-right: 20px;
            width: 150px;
            height: 30px;
            border: none;
            outline: none;
            padding-left: 15px;
            background-color: rgb(192, 192, 192);
            border-radius: 10px;

        }

        button {
            margin-left: 50px;
        }

        table {
            margin-left: 30px;
            margin-top: 50px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item">
            <input type="text" placeholder="请填入姓名" class="name"> 姓名
        </div>
        <div class="item">
            <input type="text" placeholder="请填入年龄" class="age">年龄
        </div>
        <div class="item">
            <input type="text" placeholder="请填入身高" class="height">身高
        </div>
        <div class="item">
            <input type="text" placeholder="请填入手机号" class="tel">手机号
        </div>
        <button class="btn">报名</button>
    </div>
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>身高</td>
            <td>电话</td>
            <td>功能</td>
        </tr>
    </table>
    <script>
        let name = document.querySelector(".name")
        let age = document.querySelector(".age")
        let height = document.querySelector(".height")
        let tel = document.querySelector(".tel")

        let btn = document.querySelector(".btn")
        let tb = document.querySelector("table")

        btn.addEventListener("click", function () {

            let tr = document.createElement("tr")
            tr.innerHTML = ` <td>${name.value}</td> 
                        <td>${age.value}</td>
                        <td>${height.value}</td>
                        <td>${tel.value}</td>
                        <td class = "sc">删除</td>
                      `
            tb.appendChild(tr)

        })

        name.addEventListener("blur", function (){
           if(name.value == ""){
               if(name.nextElementSibling){
                   return
               }
               let span = document.createElement("span")
               span.textContent = "*姓名不能为空"
               name.parentNode.appendChild(span)
               btn.disabled = true
           }else{
            btn.disabled = false
                name.nextElementSibling &&  name.nextElementSibling.rmove()
           }
        })
        age.addEventListener("blur",function(){
            if(age.value<10 || age.value>90){
                if(name.nextElementSibling){
                    return
                }
                let span = document.createElement("span")
                span.textContent = "您的年龄不符合要求"
                age.parentNode.appendChild(span)
                btn.disabled = true
            }else{
                btn.disabled = false
                age.nextElementSibling &&  age.nextElementSibling.rmove()
            }
        })
        height.addEventListener("blur",function(){
            if(height.value<150 ){
                if(height.nextElementSibling){
                    return
                }
                let span = document.createElement("span")
                span.textContent = "您的身高不符合要求"
                height.parentNode.appendChild(span)
                btn.disabled = true
            }else{
                btn.disabled = false
                height.nextElementSibling &&  height.nextElementSibling.rmove()
            }
        })
       tel.addEventListener("blur",function(){
            if(tel.value.length<11 ){
                if(tel.nextElementSibling){
                    return
                }
                let span = document.createElement("span")
                span.textContent = "请输入正确的手机号码"
                tel.parentNode.appendChild(span)
                btn.disabled = true
            }else{
                btn.disabled = false
                tel.nextElementSibling &&  tel.nextElementSibling.rmove()
            }
        })
        
        let sc = document.querySelectorAll(".sc")
        
        tb.addEventListener("click",function(e){
            if(e.target.classList.contains('sc')) {
                e.target.parentNode.remove()
            }
        })
        console.log(tel.nextElementSibling);

    </script>
</body>

</html>